<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String url = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="<%=basePath%>css/AdminLTE.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath%>css/ionicons.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.css">
    <link rel="stylesheet" href="<%=basePath%>css/skins/_all-skins.min.css">  
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="<%=basePath%>css/sweetalert/sweetalert.css">
    <style type="text/css">
            .font_wsg{
        font-weight:bold;        
        font-family:"微软雅黑","黑体","宋体";
        }
        </style>
</head>
<body>
  <section class="content-header">
    <h1>
        我的工作台
        <small>每月份营业额统计</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">我的工作台</a></li>
        <li class="active">每月份营业额统计</li>
    </ol>
</section>
<section class="content" style="margin-left: 15px;margin-right: 15px;">
<div class="row">
<div class="col-sm-4 form-inline">
            <label for="month" class="control-label">年份</label>
<input type="text" class="form-control form_datetime_2" readonly id="search_year" value=""/>
</div>
</div>
<div class="row" style="margin-top:15px;">
<div id="monthPay" class="col-md-6"></div> 
 </div>
</section>
</body>
<script src="<%=basePath%>js/jquery-2.2.3.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-table.js"></script>
<script src="<%=basePath%>js/jquery.easyui.min.js"></script>
<script src="<%=basePath%>js/sweetalert/sweetalert.min.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-table-zh-CN.js"></script>
<script src="<%=basePath%>js/bootstrap-datetimepicker.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="<%=basePath%>Charts/FusionCharts.js"></script>
<script type="text/javascript">
var chart;
$(function(){
	monthPayByYear();
});

function monthPayByYear(){
	var year=$("#search_year").val();
	$.ajax({
  		url: "<%=basePath%>order/getMonthPayByYear.do",
  		type : "post",  
		dataType:"json",
		data: {year:year},
  		success: function(data){
  			var chart =new FusionCharts("<%=basePath%>Charts/Column2D.swf", "myChartId"+Math.random(),800, 400, "0", "1" );
  			 var list=data.data;
  			 var length=list.length;
  			 var obj;
  			var xmlData='<chart palette="2" caption="'+data.year+'年营业额：'+data.totalPay+'" xAxisName="月份 Month" yAxisName="营业额" showBorder="0" baseFontSize="20" baseFont="微软雅黑" showValues="0" decimals="0" formatNumberScale="0" useRoundEdges="1">'
  			if(length>0){
  			for(var i = 0; list && i <length; i++){
  				obj=list[i];
  				xmlData+='<set label="'+obj.month+'" value="'+obj.totalMoney+'"/>';
  			}
  			if(length==0){
  				xmlData+='<set label="无数据" value="0"/>';
  			}
  			xmlData+='</chart>';
  			chart.setXMLData(xmlData);  
  			chart.render("monthPay"); 
  			};
  		}
  	});
}

$(".form_datetime_2").datetimepicker(
	{format: 'yyyy', startView : "decade", minView: 'decade',language : 'zh-CN',autoclose: true}).on('changeDate',function(ev){
	monthPayByYear();
  });
</script>
</html>